<template>
  <baidu-map
    class="bm-view"
    :center="center"
    :zoom="zoom"
    ak="AafOWe2bCZ6RP2dhV16I7L5bz8DIt4VY"
    ref="baiduMap"
  >
   <!-- <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation> -->
    <!--比例尺控件-->
    <!-- <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale> -->
    <!--缩放控件-->
    <!-- <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation> -->
    <!--聚合动态添加的点坐标-->
    <!-- <bm-marker-clusterer :averageCenter="true">
        	<bm-marker v-for="marker of markers" :key="marker.stationId" 
            	:position="{lng: marker.lng, lat: marker.lat}" 
                @click="lookDetail(marker)"
                :icon="{url:require('../assets/img/s_ico4.png'),opts: {imageSize: {width:30,height:30}}, size:{width:30, height:30}}"
             ></bm-marker>
         </bm-marker-clusterer> -->
    <!--信息窗体-->
    <!-- <bm-info-window 
         	:position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}"
         	:title="infoWindow.info.stationName" 
         	:show="infoWindow.show" 
         	@close="infoWindowClose" 
         	@open="infoWindowOpen">
            	<p><span class="">快充数：</span><span class="right">{{infoWindow.info.fastChargeNum}}个</span></p>
                <p><span class="">慢充数：</span><span class="right">{{infoWindow.info.slowChargeNum}}个</span></p>
                <p><span class="">状态：</span><span class="right">{{infoWindow.info.status}}</span></p>
                <p><span class="">正在充电：</span><span class="right">{{infoWindow.info.charging}}个</span></p>
                <p><span class="left"></span><span class="right"><a class="a-info" @click="gotoReal(infoWindow.info.stationId)">详细信息</a></span></p>
          </bm-info-window> -->
             <bm-info-window   :position="{lng: item.longitude, lat:item.latitude}" @open="()=>{open(item)}"  v-for="item of markerList" :key="item.identify" :title="title(item)" :width="400" @close="_onClickMarker(item)"  :show="item.show" >
             <router-link :to="'/workstation'" v-if="item.workStationName">
             <p >单位名称:{{item.unitName}}</p>
            <p>信用代码:{{item.identify}}</p>
            <p>单位地址:{{item.address}}</p>
            <p>区域街道:{{item.districtName}}--{{item.streetName}}</p>
            <p>注册日期:{{item.createDateTimeStr}}</p>
            <p>食安站站长:{{item.contactOr}}({{item.contactTel}})</p>
      </router-link>
       <div v-else>
           <p >单位名称:{{item.unitName}}</p>
            <p>信用代码:{{item.identify}}</p>
            <p>单位地址:{{item.address}}</p>
            <p>区域街道:--</p>
            <p>注册日期:{{item.createDateTimeStr}}</p>
            <p>食安站站长:--</p>
       </div>
             </bm-info-window>

          <!-- <bm-marker :position="{lng: 120.61456524669649, lat: 31.345347435103882}"  > -->
            <bm-marker-clusterer :averageCenter="true">
    <!-- <bm-marker v-for="marker of markers" :position="{lng: marker.lng, lat: marker.lat}"></bm-marker> -->
          <bm-marker :position="{lng: item.longitude, lat:item.latitude}"  v-for="item of markerList" :key="item.identify" @click="_onClickMarker(item)"/>
          <!-- <bm-marker :position="{lng: 120.61456524669649, lat: 31.345347435103882}"  />
          <bm-marker :position="{lng: 120.61456524669649, lat: 31.345347435103882}"  />
          <bm-marker :position="{lng: 120.61456524669649, lat: 31.345347435103882}"  /> -->
  </bm-marker-clusterer>
          <!-- <bm-marker :position="{lng: 120.61456524669649, lat: 31.345347435103882}"  > -->
          <!-- <bm-marker :position="{lng: 120.61456524669669, lat: 31.345347435103882}"  > -->
      <!-- <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
      <!-- <bm-boundary name="苏州市"  :strokeWeight="2" :fillOpacity="0.1" strokeColor="blue"></bm-boundary> -->
 <bm-boundary name="无锡"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary>
      <!-- <bm-boundary name="泰州"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary>
      <bm-boundary name="上海"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary>
      <bm-boundary name="南通"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary>
      <bm-boundary name="嘉兴"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary>
      <bm-boundary name="湖州"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
      <bm-boundary name="常州"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
      <bm-boundary name="镇江"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
      <bm-boundary name="盐城"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
      <bm-boundary name="扬州"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
      <bm-boundary name="淮安"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
      <bm-boundary name="连云港"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
      <bm-boundary name="宿迁"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
      <bm-boundary name="徐州"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
      <bm-boundary name="南京"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
      <bm-boundary name="安徽"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
      <bm-boundary name="苏州"  :strokeWeight="2" :fillOpacity="0.1" strokeColor="blue"></bm-boundary> -->
      <bm-boundary name="浙江"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
       <bm-boundary name="上海"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary>
       <bm-boundary name="无锡"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary>
        <bm-boundary name="常州"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
          <bm-boundary name="湖州"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 
          <bm-boundary name="南通"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary>
          <bm-boundary name="泰州"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary>
           <bm-boundary name="镇江"  :strokeWeight="2" :fillOpacity="0.7" strokeColor="white"></bm-boundary> 

  </baidu-map>
 <!-- <div id="allMap"></div> -->
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// import bmPolygon from 'vue-baidu-map/components/controls/bmPolygon';
import BmBoundary from 'vue-baidu-map/components/others/Boundary';
// import BmNavigation from 'vue-baidu-map/components/controls/Navigation';
import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer';
import BmMarker from 'vue-baidu-map/components/overlays/Marker';
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow';
// import bmGeolocation from 'vue-baidu-map/components/controls/Geolocation';

export default {
  data() {
    return {};
  },
  props: {
    center: {
      type:Object,
      default: () => ({ lng: 119.91456524669649, lat: 31.385347435103882 }),
    },
    zoom: {
      type: Number,
      default:10 ,
    },
    markerList:{
            type: Array,
      default: () => [],
    }
  },
  created(){
    
  },
    mounted() {
    },
  components: {
    BaiduMap,
     BmMarker,
    BmMarkerClusterer,BmInfoWindow,
    BmBoundary
    //  BmScale, BmNavigation, BmMarkerClusterer,, BmInfoWindow
  },
  methods: {
    _onClickMarker(e){
      this.$emit("onClickMarker",e.identify)
    },
    workstation(e){
      console.log(e);
    },
    open(e){
        sessionStorage.setItem("workId", e.workId)
    },
    title(item){
                if(item.workStationName){
 return `<div class=title><div class=name><a href="#/workstation">${item.workStationName}</a></div><div  class=${item.indexScore>79?'green ':item.indexScore>59?'yellow ':'red '}><a href="#/workstationScore/analysis">${item.indexScore}分</a></div></div>`
                }else{
 return `<div class=title><div class=name>待完善</div><div  class=${item.indexScore>79?'green ':item.indexScore>59?'yellow ':'red '} class="">${item.indexScore}分</div></div>`

                }
     
    }
  
    // // 地图初始化
    // handler ({BMapG, map}) {
    //     console.log(BMapG, map);
    //     let mapStyle = {style: "midnight"}
    //     map.setMapStyle(mapStyle);
    //     this.getProPositionMap();
    // },
    // infoWindowClose (e) {
    //     this.infoWindow.show = false
    // },
    // infoWindowOpen (e) {
    //     this.infoWindow.show = true
    // },
    // //查看详情
    // lookDetail(data, target){
    //     this.infoWindow.show =true;
    //     this.infoWindow.info=data;
    //     this.activeName = data.stationName;
    //     //为弹窗口标题添加title
    //     this.$nextTick(()=>{
    //         var win=document.querySelector(".BMap_bubble_title");
    //         win.title = this.activeName;
    //     })
    //     if(target=='left'){ //点击的是左侧列表项，则不需要滚动
    //         this.map.center={lng: data.lng, lat: data.lat};
    //         this.map.zoom = 15;
    //         return;
    //     }
    //     //滚动到指定元素位置
    //     this.$nextTick(()=>{
    //         var obj=document.querySelector(".active");
    //         var scrollTop=obj.offsetTop;
    //         this.$refs.box.scrollTop=scrollTop-180;
    //     })
    // }
  //   initMap(){
  // //   var points =this.markerList.map(x=>{
  // //     return   new BMapG.Point(x.longitude,x.latitude)
  // //   })
  // //   console.log(points);

  // //   //地图初始化
  // //   var bm = new BMapG.Map("allMap");
  // //   bm.centerAndZoom(new BMapG.Point(this.center.lng,this.center.lat), 12);
  // //   bm.addControl(new BMapG.NavigationControl());
  // //   //添加gps marker和label

  // //   //坐标转换完之后的回调函数
  // //  let translateCallback = function (data){
  // //    console.log(data);
  // //     if(data.status === 0) {
  // //       for (var i = 0; i < data.points.length; i++) {
  // //            var marker = new BMapG.Marker(data.points[i]);
  // //       bm.addOverlay(marker);
  // //       bm.setCenter(data.points[i]);
  // //       }


  // //     }
  // //   }

  // //   setTimeout(function(){
  // //       var convertor = new BMapG.Convertor();
  


  // //       convertor.translate(points, 1, 5, translateCallback)
  // //   }, 1000);
  
  //   // var points = [new BMapGL.Point(120.61456524669649,31.345347435103882),
  //   // ];
  //       var points =this.markerList.map(x=>{
  //     return   new BMapG.Point(x.longitude,x.latitude)
  //   })

  //   //地图初始化
  //   var bm = new BMapGL.Map("allMap");
  //   bm.centerAndZoom(new BMapGL.Point(120.625237,31.349494), 13);

  //   //坐标转换完之后的回调函数
  //  let translateCallback = function (data){
  //     if(data.status === 0) {
  //       for (var i = 0; i < data.points.length; i++) {
  //           bm.addOverlay(new BMapGL.Marker(data.points[i]));
  //           bm.setCenter(data.points[i]);
  //       }
  //     }
  //   }
  //   setTimeout(function(){
  //       var convertor = new BMapGL.Convertor();
  //       convertor.translate(points, COORDINATES_GCJ02, COORDINATES_BD09, translateCallback)
  //   }, 1000);
  //   }
  },
};
</script>
<style lang="scss" scoped>
.bm-view{
  width: 100%;
  height: 100%;
  /deep/.title{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    .name{
      font-weight: 700;
      font-size: 20px;
      
    }
    .red,.yellow,.green{
  font-size: 20px;
}
  }
}

</style>